<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>学生信息管理</title> 
        <!-- 在网页中引入axios的js文件 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    </head>
    <body>
        <h1>学生信息管理</h1>
        <table id="tid" width="500" border="1">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1001</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>20</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>李四</td>
                    <td>女</td>
                    <td>21</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>王五</td>
                    <td>男</td>
                    <td>22</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>赵六</td>
                    <td>女</td>
                    <td>20</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr> -->
            </tbody>
        </table>

        <br/><br/><br/>
        <h2>添加学生信息</h2>
        <form method="post" name="myform" onsubmit="doAdd(); return false;">
            <!-- 学号：<input type="text" name="sno"/><br/><br/> -->
            姓名：<input type="text" name="name"/><br/><br/>
            性别：<input type="radio" name="sex" checked value="1"/>男
                  <input type="radio" name="sex" value="0"/>女 <br/><br/>
            年龄：<input type="text" name="age"/><br/><br/>
            班级：<input type="text" name="classid"/><br/><br/>
            <input type="submit" value="添加"/>
        </form>

        <script>
           // 通过表单填写，点击添加按钮后，实现将表单中的数据添加到上面表格中。

           // Ajax加载学员信息，并输出到页面中
           async function showData(){
               // 调用axios函数，发送get请求获取所有学生信息并在回调函数中处理
               try {
                    // 执行axios的ajax发送，提交添加信息
                    const result = await axios({
                        url: "http://localhost:3000/stu",
                        method: "get"
                    });
                    //console.log(result);
                    // 获取表格的tbody节点
                    const tbody = document.querySelector("#tid tbody");
                    tbody.innerHTML = "";
                    // 遍历数据
                    result.data.forEach(stu => {
                        let tr = document.createElement("tr");
                        tr.innerHTML = `<td>${stu.id}</td>
                                        <td>${stu.name}</td>
                                        <td>${stu.sex==1? "男" : "女"}</td>
                                        <td>${stu.age}</td>
                                        <td>${stu.classid}</td>
                                        <td><a href="javascript:;" onclick="doDel('${stu.id}',this)">删除</a></td>`;
                        tbody.append(tr);
                    });
                } catch (error) {
                    alert("ajax请求失败！");
                    console.log(error);
                }
           }
           showData();

           // 执行学生信息删除操作
           async function doDel(id, ob){
               // console.log(id,ob);
               if(!confirm("确定要删除吗？")) return;

                try {
                    // 发送Ajax提交删除操作
                    await axios({
                        method:"delete",
                        url:"http://localhost:3000/stu/"+id,
                    })
                    // 执行页面文档DOM节点的删除操作
                    ob.parentElement.parentElement.remove();
                } catch (error) {
                    alert("信息删除失败！");
                    console.log(error);
                }
              
           }

           // 学生信息添加操作
           async function doAdd(){
                // 获取form表单并绑定表单提交事件
                const form = document.querySelector("form");
                // 获取表单项内容，并拼接后添加到data对象中
                const data = {};
                data.name = form.name.value;
                data.sex = form.sex.value;
                data.age = form.age.value;
                data.classid = form.classid.value;
                console.log(data);

                try {
                    // 执行axios的ajax发送，提交添加信息
                    const result = await axios({
                        url: "http://localhost:3000/stu",
                        method: "post",
                        data: data
                    });
                    console.log(result);
                    // 刷新数据显示
                    showData();
                } catch (error) {
                    alert("添加失败！");
                    console.log(error);
                }
                return false;
           }

           
        </script>
    </body>
</html>